import React from 'react';
import {Descriptions  } from 'antd';
import { Scrollbars } from "react-custom-scrollbars";
import hoc from "./hoc";
import TitleComponent from "../title";
import LayerCreateForm from './layer';
import Css from "../../../../assets/css/pc/member/address/index.css";
//修改地址弹窗标题
const LayerTitle= ()=>{
    return(
        <div className={Css['layerTitleBox']}>
            <div className={Css['laterTitle']}>修改收货地址</div>
            <div className={Css['layerTitleSub']}>请正确填写以下信息<span>*</span> 项为必填</div>
        </div>
    )
}
const address = hoc((props)=>{
    return(
        <section  className={Css['address']} >
            <div className={Css['addressCen']} >
                <TitleComponent title={'收货地址'} modal={'添加收货地址'} onClick={props.addAddress} />
                <Scrollbars
                    className={Css["scrollAddress"]}
                    autoHide
                    autoHideTimeout={500}
                    universal={true}
                >
                    <div className={Css['addressBox']}>
                        <div className={Css['addressItem']}>
                            <Descriptions
                                bordered
                                column={{
                                    xxl: 4,
                                    xl: 3,
                                    lg: 3,
                                    md: 3,
                                    sm: 2,
                                    xs: 1,
                                }}
                                size={'small'}
                            >
                                <Descriptions.Item label="收货人">Zhou Maomao</Descriptions.Item>
                                <Descriptions.Item label="手机号">17698301613</Descriptions.Item>
                                <Descriptions.Item label="所在地区">Hangzhou, Zhejiang</Descriptions.Item>
                                <Descriptions.Item label="详细地址">
                                    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                                </Descriptions.Item>
                            </Descriptions>
                            <div className={Css['edit']}>
                                <div className={Css['editFont']}>默认地址</div>
                                <div className={Css['editFont']} onClick={props.addAddress}>修改</div>
                                <div className={Css['editFont']} onClick={props.editDelete}>删除</div>
                            </div>
                        </div>
                        <div className={Css['addressItem']}>
                            <Descriptions
                                bordered
                                column={{
                                    xxl: 4,
                                    xl: 3,
                                    lg: 3,
                                    md: 3,
                                    sm: 2,
                                    xs: 1,
                                }}
                                size={'small'}
                            >
                                <Descriptions.Item label="收货人">Zhou Maomao</Descriptions.Item>
                                <Descriptions.Item label="手机号">17698301613</Descriptions.Item>
                                <Descriptions.Item label="所在地区">Hangzhou, Zhejiang</Descriptions.Item>
                                <Descriptions.Item label="详细地址">
                                    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                                </Descriptions.Item>
                            </Descriptions>
                            <div className={Css['edit']}>
                                <div className={Css['editFont']}>默认地址</div>
                                <div className={Css['editFont']} onClick={props.addAddress}>修改</div>
                                <div className={Css['editFont']} onClick={props.editDelete}>删除</div>
                            </div>
                        </div>
                        <div className={Css['addressItem']}>
                            <Descriptions
                                bordered
                                column={{
                                    xxl: 4,
                                    xl: 3,
                                    lg: 3,
                                    md: 3,
                                    sm: 2,
                                    xs: 1,
                                }}
                                size={'small'}
                            >
                                <Descriptions.Item label="收货人">Zhou Maomao</Descriptions.Item>
                                <Descriptions.Item label="手机号">17698301613</Descriptions.Item>
                                <Descriptions.Item label="所在地区">Hangzhou, Zhejiang</Descriptions.Item>
                                <Descriptions.Item label="详细地址">
                                    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                                </Descriptions.Item>
                            </Descriptions>
                            <div className={Css['edit']}>
                                <div className={Css['editFont']}>默认地址</div>
                                <div className={Css['editFont']}>修改</div>
                                <div className={Css['editFont']}>删除</div>
                            </div>
                        </div>
                        <div className={Css['addressItem']}>
                            <Descriptions
                                bordered
                                column={{
                                    xxl: 4,
                                    xl: 3,
                                    lg: 3,
                                    md: 3,
                                    sm: 2,
                                    xs: 1,
                                }}
                                size={'small'}
                            >
                                <Descriptions.Item label="收货人">Zhou Maomao</Descriptions.Item>
                                <Descriptions.Item label="手机号">17698301613</Descriptions.Item>
                                <Descriptions.Item label="所在地区">Hangzhou, Zhejiang</Descriptions.Item>
                                <Descriptions.Item label="详细地址">
                                    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                                </Descriptions.Item>
                            </Descriptions>
                            <div className={Css['edit']}>
                                <div className={Css['editFont']}>默认地址</div>
                                <div className={Css['editFont']}>修改</div>
                                <div className={Css['editFont']}>删除</div>
                            </div>
                        </div>
                        <div className={Css['addressItem']}>
                            <Descriptions
                                bordered
                                column={{
                                    xxl: 4,
                                    xl: 3,
                                    lg: 3,
                                    md: 3,
                                    sm: 2,
                                    xs: 1,
                                }}
                                size={'small'}
                            >
                                <Descriptions.Item label="收货人">Zhou Maomao</Descriptions.Item>
                                <Descriptions.Item label="手机号">17698301613</Descriptions.Item>
                                <Descriptions.Item label="所在地区">Hangzhou, Zhejiang</Descriptions.Item>
                                <Descriptions.Item label="详细地址">
                                    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                                </Descriptions.Item>
                            </Descriptions>
                            <div className={Css['edit']}>
                                <div className={Css['editFont']}>默认地址</div>
                                <div className={Css['editFont']}>修改</div>
                                <div className={Css['editFont']}>删除</div>
                            </div>
                        </div>
                    </div>
                </Scrollbars>
                <LayerCreateForm
                    form={props.form}
                    isModal={props.isModal}
                    onCancel={props.onCancel}
                    onOk={props.onOk}
                    centered={true}
                    closable={false}
                    width={700}
                    style={{
                        borderRadius:10,
                        overflow: 'hidden' ,
                        paddingBottom:0,
                    }}
                    bodyStyle={{
                        padding:0,
                        margin:'16px 0',
                    }}
                    wrapClassName={Css['addLayer']}
                    title={<LayerTitle />}
                />
                {/*<Pagination*/}
                {/*    showQuickJumper*/}
                {/*    defaultCurrent={1}*/}
                {/*    total={11}*/}
                {/*    style={{textAlign: 'right'}}*/}
                {/*    onChange={props.pageOnChange}*/}
                {/*/>*/}
            </div>
        </section>
    )
});
export default address;